<template>
  <div class="dwv-wrapper">
    <pad-child-header :title="title"></pad-child-header>
    <div class="dwv-content">
      <div class="dwv-pointer">
        <div
          v-for=" (value,index) in bottomNavListConfig"
          :key="index"
          @click="cllckNav(value,index)"
        >
          <div class="pointer-list">
            <img :src="value.imgSrc" alt>
            <span>{{value.text}}</span>
          </div>

          <ul class="button_nav_ul _sequence_style" v-if="value.selsected && index != 0">
            <li v-for="(v,i) in value.childList" :key="i" @click="cllckNav(v,i,index)">{{v.text}}</li>
          </ul>
          <ul
            class="button_nav_ul _sequence_style _sequence_style_block"
            v-if="value.selsected && index == 0"
          >
            <li v-for="(v,i) in value.childList" :key="i" @click.stop="cllckNav(v,i,index)">
              <div :class="v.text" :key="i"></div>
            </li>
          </ul>
        </div>
      </div>
      <!-- dcm影像 -->
      <div ref="imgBox" class="dwv-image">
        <div class="dwvs-box">
          <section
          :class="{'ac':selfDwvsItemAc == i}"
          class="dwvs_item"
          ref="dwvsItem"
          v-for="(v,i) in dwvsItemNum"
          :key="i"
          @click="selfDwvsItemAcFn(i)"
        >
          <div :id="setDwvId(i)" class="c_dwv">
            <div class="layerContainer">
              <div class="dropBox"></div>
              <canvas
                style="position:absolute;top:0;left:0"
                ref="dwvsCanvas" class="imageLayer"
              >仅适用于兼容HTML5的浏览器……</canvas>
              <div class="drawDiv" ref="drawDiv"></div>
            </div>
            <div class="history" style="display:none"></div>
          </div>
        </section>
        </div>
      </div>
      <div class="dwv-list">
        <div class="img-list" ref="tcSfPath" v-for="(item,index) in powerfilmeList" :key="index">
          <img :src="item.getSmallFilePath" alt @click="getImg(item)">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/******************** dwv ************************** */
import dwv from "dwv-mzyl";
import { HttpService } from "../../provides/index";

// decode query(解码查询)
dwv.utils.decodeQuery = dwv.utils.base.decodeQuery;
// progress
dwv.gui.displayProgress = function() {};
// window
dwv.gui.getWindowSize = dwv.gui.base.getWindowSize;
// get element
dwv.gui.getElement = dwv.gui.base.getElement;
// refresh element
dwv.gui.refreshElement = dwv.gui.base.refreshElement;
dwv.gui.Threshold = dwv.gui.base.Threshold;
dwv.gui.Slider = dwv.gui.base.Slider;
dwv.gui.Sharpen = dwv.gui.base.Sharpen;
dwv.gui.Sobel = dwv.gui.base.Sobel;
dwv.gui.Undo = dwv.gui.base.Undo;

// Image decoders (for web workers) 图像解码
dwv.image.decoderScripts = {
  jpeg2000: "static/dwv/decoders/pdfjs/decode-jpeg2000.js",
  "jpeg-lossless": "static/dwv/decoders/rii-mango/decode-jpegloss.js",
  "jpeg-baseline": "static/dwv/decoders/pdfjs/decode-jpegbaseline.js"
};

/******************** dwv ************************** */

// 底部导航config
let bottomNavListConfig = [
  {
    selsected: false, //是否选中
    firstRank: true, //是否第一级
    text: "序列",
    imgSrc: require("@/assets/images/xl.png"),
    childList: [
      {
        selsected: false,
        text: "one",
        block: 1,
        marginBottom: "0",
        marginRight: "0",
        width: "100%",
        height: "100%"
      },
      {
        selsected: false,
        text: "two",
        block: 2,
        marginBottom: "0.1rem",
        marginRight: "0",
        width: "100%",
        height: "50%"
      },
      {
        selsected: false,
        text: "three",
        block: 2,
        marginRight: "0.1rem",
        marginBottom: "0",
        width: "50%",
        height: "100%"
      },
      {
        selsected: false,
        text: "fore",
        block: 4,
        marginBottom: "0.1rem",
        marginRight: "0.1rem",
        width: "50%",
        height: "50%"
      },
      {
        selsected: false,
        text: "five",
        block: 6,
        marginBottom: "0.1rem",
        marginRight: "0.1rem",
        width: "33.3%npm",
        height: "50%"
      },
      {
        selsected: false,
        text: "six",
        block: 6,
        marginBottom: "0.1rem",
        marginRight: "0.1rem",
        width: "50%",
        height: "33.3%"
      }
    ]
  },
  {
    selsected: false, //是否选中
    firstRank: true, //是否第一级
    text: "调窗",
    imgSrc: require("@/assets/images/tc.png"),
    selectedTool: "WindowLevel",
    childList: [
      {
        selsected: false,
        text: "默认",
        windowLevelPrese: "Algo1"
      },
      {
        selsected: false,
        text: "头部平扫",
        windowLevelPrese: "minmax"
      },
      {
        selsected: false,
        text: "头颅骨窗",
        id: 2,
        ww: "1600",
        wl: "450",
        modality: true
      },
      {
        selsected: false,
        text: "颈椎",
        id: 2
      },
      {
        selsected: false,
        text: "肺窗",
        id: 2
      },
      {
        selsected: false,
        text: "纵膈窗",
        id: 2
      },
      {
        selsected: false,
        text: "腹部",
        id: 2
      },
      {
        selsected: false,
        text: "肝脏",
        id: 2
      },
      {
        selsected: false,
        text: "关节骨窗",
        id: 2
      },
      {
        selsected: false,
        text: "血管",
        id: 2
      }
    ]
  },
  {
    selsected: false, //是否选中
    firstRank: true, //是否第一级
    text: "测量",
    imgSrc: require("@/assets/images/cl.png"),
    selectedTool: "Draw",
    childList: [
      {
        selsected: false,
        text: "直线",
        shape: "Line"
      },
      {
        selsected: false,
        text: "角度",
        shape: "Protractor"
      },
      {
        selsected: false,
        text: "矩形",
        shape: "Rectangle"
      },
      {
        selsected: false,
        text: "椭圆",
        shape: "Ellipse"
      },
      {
        selsected: false,
        text: "清除",
        clearAll: true
      }
    ]
  },
  {
    selsected: false, //是否选中
    firstRank: true, //是否第一级
    text: "工具",
    imgSrc: require("@/assets/images/gj.png"),
    // selectedTool:'tool',
    childList: [
      {
        selsected: false,
        text: "反色",
        tool: "invplain"
      },
      {
        selsected: false,
        text: "移动",
        tool: "ZoomAndPan"
      },
      {
        selsected: false,
        text: "自适应",
        tool: "reset"
      },
      {
        selsected: false,
        text: "播放",
        tool: "play"
      }
    ]
  }
];

//记录反色交互
let dwvPlainArr = [
  {
    tool: "invplain"
  },
  {
    tool: "invplain"
  },
  {
    tool: "invplain"
  },
  {
    tool: "invplain"
  },
  {
    tool: "invplain"
  },
  {
    tool: "invplain"
  }
];
export default {
  components: {},
  props: {},
  data() {
    return {
      powerfilmeList: [],
      params: {},
      title: "影像浏览",
      filmId: "",
      bottomNavListConfig,
      dataLoaded: false,
      loaded: 0,
      tags: null,
      showDicomTags: false,
      selectedTool: "",
      wl: 0,
      wc: 0,
      dwvsItemNum: 1, //默认序列 1 块
      selfDwvsItemAc: 0, //当前点击的devItem
      dwvAppAc: null,
      bottomNavAc: null //右侧导航是否被选中
    };
  },
  watch: {},
  computed: {},
  methods: {
    resizeimg(event) {
      var el = event.currentTarget;
      console.log(el);
      var maxW = el.parentNode.offsetWidth;
      var maxH = el.parentNode.offsetHeight;
      var imgW = el.offsetWidth;
      var imgH = el.offsetHeight;
      console.log(maxH);
      if (imgW > imgH) {
        imgW = maxW;
        el.width = imgW;
      } else {
        imgH = maxH;
        console.log(maxH);
        el.height = imgH;
      }
      console.log(imgW);
    },
    /**
     * @param obj 点击的当前对象 i 当前对象的下标 _i 一级的下标 (点击二级导航是需要)
     * */
    cllckNav(obj, i, _i) {
      if (_i == undefined) {
        if (this.bottomNavAc == i) {
          this.bottomNavAc = null;
        } else {
          this.bottomNavAc = i;
        }
      }
      if (_i == 0) {
        this.dwvsItemNum = obj.block;
        setTimeout(() => {
          this.$refs.dwvsItem.forEach((ele, j) => {
            // if (ele.style.height == "50%") {
            //   this.$refs.dwvsWrapper.style.flexDirection = "column";
            // } else {
            //   this.$refs.dwvsWrapper.style.flexDirection = "inherit";
            // }
            if (j == 0) {
              // ele.style.marginBottom = obj.marginBottom;
            }
            ele.style.width = obj.width;
            ele.style.height = obj.height;
            this.fitToSize();
          });
        }, 10);

        return;
      }
      if (obj.firstRank) {
        //当前元素是选中的
        if (obj.selsected) {
          obj.selsected = !obj.selsected;
          return;
        }
        this.resetBottomNavListConfig(obj);
        obj.selsected = !obj.selsected;
      } else {
        this.resetBottomNavListConfig(obj, _i);
        obj.selsected = !obj.selsected;
        //点击二级 选中功能设置
        this.onChangeTool(obj, _i);
      }
    },
    resetBottomNavListConfig(obj, i) {
      if (!obj.firstRank) {
        this.bottomNavListConfig[i].childList.forEach(element => {
          element.selsected = false;
        });
        return;
      }

      this.bottomNavListConfig.forEach(element => {
        element.selsected = false;
      });
    },
    /**
     * @param obj 点击的当前对象 i 一级的下标 (点击二级导航是需要)
     * */
    onChangeTool(obj, i) {
      console.log(this.selfDwvsItemAc);
      if (!this[this.dwvAppAc].getDrawController()) {
        return;
      }
      //选中的是工具 反色
      if (obj.tool && obj.tool == "invplain") {
        if (
          dwvPlainArr[this.selfDwvsItemAc] &&
          dwvPlainArr[this.selfDwvsItemAc].tool == "invplain"
        ) {
          this[this.dwvAppAc].onChangeColourMap({
            currentTarget: {
              value: dwvPlainArr[this.selfDwvsItemAc].tool
            }
          });
          dwvPlainArr[this.selfDwvsItemAc].tool = "plain";
          return;
        }
        if (
          dwvPlainArr[this.selfDwvsItemAc] &&
          dwvPlainArr[this.selfDwvsItemAc].tool == "plain"
        ) {
          this[this.dwvAppAc].onChangeColourMap({
            currentTarget: {
              value: dwvPlainArr[this.selfDwvsItemAc].tool
            }
          });
          dwvPlainArr[this.selfDwvsItemAc].tool = "invplain";
          return;
        }
      }

      //选中的是工具 移动缩放
      if (obj.tool && obj.tool == "ZoomAndPan") {
        this[this.dwvAppAc].onChangeTool({
          currentTarget: {
            value: obj.tool
          }
        });
        return;
      }
      //选中的是工具 自适应
      if (obj.tool && obj.tool == "reset") {
        this.onReset();
        return;
      }
      //选中的是工具 播放
      if (obj.tool && obj.tool == "play") {
        this[this.dwvAppAc].onChangeTool({
          currentTarget: {
            value: "Scroll"
          }
        });
        this[this.dwvAppAc].MZYL.play();
        return;
      }
      this[this.dwvAppAc].onChangeTool({
        currentTarget: {
          value: this.bottomNavListConfig[i].selectedTool
        }
      });
      //如果是draw
      if (obj.shape) {
        this.onChangeShape(obj);
      }
      //如果是draw
      if (obj.clearAll) {
        this[this.dwvAppAc].MZYL.clearAll();
      }
      //如果是预设窗口
      if (obj.windowLevelPrese) {
        this.onChangeWindowLevelPreset(obj);
      }
      //如果是预设窗口
      if (obj.modality) {
        this.setWindowLevel(obj);
      }
    },

    /**
     * 重置
     * */
    onReset() {
      this[this.dwvAppAc].onDisplayReset();
    },
    /**
     * 重置 绘画标注的样式
     * */
    onChangeShape(obj) {
      this[this.dwvAppAc].onChangeShape({
        currentTarget: {
          value: obj.shape
        }
      });
    },
    /**
     *绘画标注返回上一步
     * */
    onUndo() {
      this[this.dwvAppAc].onUndo();
    },
    /**
     *绘画标注返回下一步
     * */
    onRedo() {
      this[this.dwvAppAc].onRedo();
    },
    /**
     *处理窗口/级别预置更改 .setWindowLevel(ww, wc);
     * */
    onChangeWindowLevelPreset(obj) {
      this[this.dwvAppAc].onChangeWindowLevelPreset({
        currentTarget: {
          value: obj.windowLevelPrese
        }
      });
    },
    setWindowLevel(obj) {
      // this.dwvApp.getViewController.setWindowLevel(obj.ww, obj.wl);
      this[this.dwvAppAc].MZYL.setWindowLevel(800, 200);
    },
    getImg(item) {
      this[this.dwvAppAc].loadURLs(item.getDcmFilePath);
    },
    selfDwvsItemAcFn(i) {
      this.selfDwvsItemAc = i;
      let self = this;
      this.$refs.dwvsCanvas.forEach((ele, j) => {
        if (j == i) {
          ele.style.pointerEvents = "auto";
          this.init(i);
        } else {
          ele.style.pointerEvents = "none";
          // 设置状态
          if (this.$refs.drawDiv[j].children.length > 0) {
            this.$refs.drawDiv[j].children[0].style.pointerEvents = "none";
          }
        }
      });
    },
    fitToSize() {
      /**
       * 点击序列 初始化 默认激活 第一个dwv
       * 清空其他的dwv
       *
       */
      // --------------------------------------------------------
      this.selfDwvsItemAc = 0;
      this.dwvAppAc = "dwvApp0";
      console.log(this);
      this.$refs.dwvsCanvas.forEach((ele, j) => {
        if (j == 0) {
          ele.style.pointerEvents = "auto";
        } else {
          ele.style.pointerEvents = "none";
        }
        if (this["dwvApp" + j] && this["dwvApp" + j].getViewController()) {
          this["dwvApp" + j].onDisplayReset();
          this["dwvApp" + j].fitToSize(
            this["dwvApp" + j].getLayerContainerSize(),this["dwvApp" + j].getImageLayer()
          );
        }
      });
      // -------------------点击序列 初始化-------------------------------------
    },
    setDwvId(i) {
      return "dwv" + i;
    },
    //初始化项目
    //默认id 'dwv'
    init(dwvId = "0") {
      if (this["dwvApp" + dwvId]) {
        this.dwvAppAc = "dwvApp" + dwvId;
        this["dwvApp" + dwvId].__selftest = dwvId;
        //设置 DrawController ViewController
        this["dwvApp" + dwvId].MZYL.uploadDrawViewController(
          this["dwvApp" + dwvId]
        );
        return;
      }
      /******************** dwv ************************** */
      // create app
      console.log(this.dwvAppAc)
      this.dwvAppAc = "dwvApp" + dwvId;
      this[this.dwvAppAc] = new dwv.App();
      let _self = this;
      // display loading time
      var listener = function(event) {
        _self.wc = event.wc;
        _self.wl = event.ww;
      };
      this[this.dwvAppAc].addEventListener("wl-width-change", listener);
      this[this.dwvAppAc].addEventListener("wl-center-change", listener);
      // initialise app
      this[this.dwvAppAc].init({
        containerDivId: "dwv" + dwvId,
        fitToWindow: true,
        tools: [
          "Scroll",
          "ZoomAndPan",
          "WindowLevel",
          "Draw",
          "Livewire",
          "Filter"
        ],
        filters: ["Threshold", "Sharpen", "Sobel"],
        // gui: ["tool", "load", "help", "undo", "version", "tags", "drawList"],
        gui: ["undo"],
        shapes: ["Line", "Protractor", "Rectangle", "Roi", "Ellipse"],
        isMobile: true
      });
      // progress
      var self = this;
      self.selectedTool = "ZoomAndPan";
      this[this.dwvAppAc].addEventListener("load-start", function(event) {
        self.$indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });
      });
      this[this.dwvAppAc].addEventListener("load-progress", function(event) {
        self.loaded = event.loaded;
        console.log("加载中。。。" + self.loaded);
      });
      this[this.dwvAppAc].addEventListener("load-end", function(event) {
        self.$indicator.close();
      });
    },
    //获取影像数据
    getBrowsing(params) {
      HttpService.api({
        url: "/getFilm",
        params: params,
        headers: {}
      }).then(res => {
        if (res.success) {
          let el = this.$refs.tcSfPathWarpper;
          setTimeout(() => {
            let elChildrenArr = this.$refs.tcSfPath;
            this.setTcSfPathWarpper(el, elChildrenArr.length);
          }, 10);
          this.powerfilmeList = res.result;
          //默认加载第一个序列
          this[this.dwvAppAc].loadURLs(this.powerfilmeList[0].getDcmFilePath);
        }
      });
    },
    /*方法说明
       *@method 方法名
       *@param el 元素节点，num 子级的长度
       *@return  Void
       */
    setTcSfPathWarpper(el, num) {
      let elChildren = 158;
      // el.style.width =
      //   ((elChildren * num) / 100 + 0.05 * num).toFixed(2) + "rem";
    }
  },
  created() {},
  mounted() {
    this.init();
    this.params = {
      patientid: this.$route.params.patientid,
      studyid: this.$route.params.studyid,
      hospcode: this.$route.params.hospcode,
      hospdomain: this.$route.params.hospdomain
    };
    this.getBrowsing(this.params);
  }
};
</script>
<style lang="scss" scoped>
._sequence_style {
  font-size: pxToRem(15);
  box-shadow: inset 2px 3px 6px 0px rgba(0, 0, 0, 0.34);
  background-color: #eaeaea;
  border-bottom: pxToRem(1) solid #eaeaea;
  box-sizing: border-box;
  position: relative;
  padding-top: pxToRem(10);

  li {
    padding: pxToRem(10);
    text-align: center;
  }

  &:before {
    content: "";
    position: absolute;
    width: pxToRem(9);
    height: pxToRem(14);
    background: url("../../assets/images/adaptation/ipad768-movie_03.png")
      no-repeat center top;
    background-color: #ffffff;
    top: pxToRem(-7);
    left: pxToRem(62);
  }
}

._sequence_style._sequence_style_block {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 0;

  li {
    width: 50%;
    padding: 0;

    > div {
      height: pxToRem(56);
    }

    .one {
      background: url("../../assets/images/adaptation/6.png") no-repeat center;
      background-size: pxToRem(46) pxToRem(36);
    }

    .two {
      background: url("../../assets/images/adaptation/7.png") no-repeat center;
      background-size: pxToRem(46) pxToRem(36);
    }

    .three {
      background: url("../../assets/images/adaptation/8.png") no-repeat center;
      background-size: pxToRem(46) pxToRem(36);
    }

    .fore {
      background: url("../../assets/images/adaptation/9.png") no-repeat center;
      background-size: pxToRem(46) pxToRem(36);
    }

    .five {
      background: url("../../assets/images/adaptation/10.png") no-repeat center;
      background-size: pxToRem(46) pxToRem(36);
    }

    .six {
      background: url("../../assets/images/adaptation/11.png") no-repeat center;
      background-size: pxToRem(46) pxToRem(36);
    }
  }
}

.dwv-content {
  box-sizing: border-box;
  overflow: hidden;
  height: 100%;
  padding-top: pxToRem(65);
  display: flex;
  justify-content: space-around;

  .dwv-pointer {
    width: pxToRem(150);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    > div {
      width: 100%;
    }

    .pointer-list {
      height: pxToRem(54);
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: pxToRem(15);
      color: #737373;
      letter-spacing: pxToRem(3);

      img {
        height: pxToRem(26);
        width: pxToRem(26);
        margin-right: pxToRem(10);
      }
    }
  }

  .dwv-image {
    width: pxToRem(710);
    height: pxToRem(692);
    box-shadow: pxToRem(3) pxToRem(4) pxToRem(5) 0px rgba(0, 0, 0, 0.29);
    border-radius: pxToRem(10);
    border: solid pxToRem(2) #469feb;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: #060606;
    .dwvs-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .drawDiv {
      position: absolute;
      width: 100%!important;
      height: 100%!important;
      pointer-events: none;
      top: 0;
      left: 0;
    }

    .dwvs_item {
      width: 100%;
      height: 100%;
      border:2px solid #777;
      box-sizing: border-box;
    }

    .dwvs_item.ac {
      // .layerContainer {
        box-sizing: border-box;
        // box-shadow: 0rem 0rem 0.05rem 0px #4096e0;
        border:2px dashed #469feb;
      // }
    }
      .c_dwv {
        font-family: Arial, Helvetica, sans-serif;
        height: 100%;
      }

    .layerContainer {
      position: relative;
      padding: 0;
      margin: auto;
      text-align: center;
      width: 100% !important;
      height: 100% !important;
      // border: 1px solid #333;
      border-radius: 0.06rem;
      background: #000;
      .canvas{
            width: 100% !important
      }
    }
  }

  .dwv-list {
    width: pxToRem(164);

    height: pxToRem(703);
    overflow-y: scroll;

    .img-list {
      width: pxToRem(110);
      height: pxToRem(110);

      border: #bababa solid pxToRem(1);
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      margin-top: pxToRem(10);

      &:nth-last-of-type() {
        margin-bottom: pxToRem(10);
      }
    }
  }
}
</style>